<template>
  <div class="chart-content-wrapper"
       @mouseenter="mouseenter()"
       @mouseleave="mouseleave()">
    <!-- 头部筛选和标题 -->
    <top-filter :title="reportName" ref="topFilter">
      <single-list-filter-without-cb :filter="filterN"
                                     :type="'threeYears'"
                                     @confirmSingleSelect="chooseYear"
                                     ref="yearsFilter">
      </single-list-filter-without-cb>
    </top-filter>
    <!-- 详情 -->
    <div class="content" v-show="isShowChart" style="height: 400px; overflow: visible;">
      <div class="two-chart-left height-percent-90">
        <div class="chart-container">
          <div class="four-chart-mini-title ">
            <span>产业需求</span>
            <span class="title-bk-container"></span>
          </div>
          <div id="industry-demand-id" class="chart-type1"></div>
        </div>
      </div>

      <div class="two-chart-right height-percent-90">
        <div class="chart-container">
          <div class="four-chart-mini-title">
            <span>行业需求</span>
            <span class="title-bk-container"></span>
          </div>
          <div id="trade-demand-id" class="chart-type1" style="padding-left: 40px; top: 6px"></div>
        </div>
      </div>
        <div class="colligateChart-go-next" style="margin: 0 auto" @click="goToNext">
          招聘岗位信息表 >>
        </div>
    </div>
  </div>
</template>

<script>

  import TopFilter from '../../last/filter/top-filter1'
  import SingleListFilterWithoutCb from '../../last/filter/single-list-filter-without-checkbox.vue'
  import {loadingOpt} from '../../../assets/js/utils'

  import {getSearchItems, getQueryHrDemand} from '../../../api/api'

  export default {

    props: ['isChange', 'fullScreen', 'isCollapse',],
    data () {
      return {
        reportName: '劳动力需求情况',
        filterN: null,
        isShowChart: true,
        queryYear: ''
      }
    },
    components: {
      TopFilter,
      SingleListFilterWithoutCb
    },
    watch: {
      isChange () {
        setTimeout(() => {
          setTimeout(() => {
            this.resizeMyChart();
          }, 1)
        }, 211)
      },
      fullScreen () {
        setTimeout(() => {
          setTimeout(() => {
            this.resizeMyChart();
          }, 1)
        }, 211)
      }
    },
    mounted () {
      this.initMyChart();
      this.initFilter();
    },
    methods: {
      initFilter () {
        getSearchItems('init/initInput')
          .then((res) => {
            if (res.code == 0) {
              this.filterN = JSON.parse(JSON.stringify(res.data));
              this.queryYear = res.data.years[0];
              this.getData();
            }
          });
      },
      initMyChart () {
        this.industryDemand = this.$echarts.init(document.getElementById('industry-demand-id'));
        this.tradeDemand = this.$echarts.init(document.getElementById('trade-demand-id'));
      },
      resizeMyChart () {
        if (this.industryDemand) {
          this.industryDemand.resize();
        }
        if (this.tradeDemand) {
          this.tradeDemand.resize();
        }
      },
      clearMyChart () {
        this.industryDemand.clear();
        this.tradeDemand.clear();
      },
      loadingMyChart (val) {
        if (val) {
          this.industryDemand.showLoading(loadingOpt);
          this.tradeDemand.showLoading(loadingOpt);
        } else {
          this.industryDemand.hideLoading();
          this.tradeDemand.hideLoading();
        }
      },
      getData () {
        this.clearMyChart();
        this.loadingMyChart(true);
        getQueryHrDemand('hr/queryHrDemand', this.queryYear)
          .then((response) => {
            if (response.code == 0) {
              this.showChart = true;
              this.loadingMyChart(false);

              let data = response.data;
              this.drawIndustryDemand(data.ins);
              this.drawTradeDemand(data.ocs);

            } else {
              this.showChart = false;
            }
          });
      },
      chooseYear (year) {
        this.queryYear = year;
        this.getData();
      },
      goToNext () {
        this.$router.push({path: '/humanResources/job-information', query: {year: this.queryYear}})
      },
      // 产业需求
      drawIndustryDemand (json) {

        let pieObjArray = [];
        json.map((item) => {
          if (item.title) {
            let tempObj = {};
            tempObj.value = item.count;
            tempObj.numberRatio = (Number(item.rate) * 100).toFixed(2);
            tempObj.name = item.title + tempObj.numberRatio + '%';
            tempObj.number = item.count;

            pieObjArray.push(tempObj);
          }
        });

        let option = {
          tooltip: {
            confine: true,
            trigger: 'item',
            formatter: function (params) {
              return `<span style="color: #fff; font-size: 12px">产业需求</span></br>
                      <span style="color: #fff; font-size: 12px">产业: ${params.name.substr(0, 4)}</span></br>
                      <span style="color: #fff; font-size: 12px">人数: ${params.data.number} 人</span></br>
                      <span style="color: #fff; font-size: 12px">占比: ${params.data.numberRatio}%</span>`;
            }
          },
          legend: {
            orient: 'vertical',
            x: '70%',
            y: '30%',
            icon: 'rect',
            itemWidth: 10,
            itemHeight: 10,
            itemGap: 20,
            selectedMode: false,
            textStyle: {
              color: '#fff',
            },
          },
          series: [
            {
              minAngle: 5,
              type: 'pie',
              radius: ['40%', '60%'],
              center: ['40%', '40%'],
              avoidLabelOverlap: false,
              hoverAnimation: false,
              animation: false,
              label: {
                show: false,
              },
              labelLine: {
                normal: {
                  show: false
                }
              },
              itemStyle: {
                color: function (params) {
                  let colorList = ['#3281FD', '#FF6A93', '#FFD66A'];
                  return colorList[params.dataIndex]
                }
              },
              data: pieObjArray
            }
          ]
        };

        this.industryDemand.setOption(option);
      },
      // 行业需求
      drawTradeDemand (json) {
        let mapDataArr = [];
        json.forEach((item, index) => {
          let tempObj = {};

          tempObj.name = item.title;
          tempObj.value = item.count;
          tempObj.rate = item.rate;

          mapDataArr.push(tempObj);
        });


        let option = {
          tooltip: {
            trigger: 'item',
            textStyle: {
              fontSize: 12,
            },
            formatter: function (params) {
              let rate = (Number(params.data.rate) * 100).toFixed(2);
              let text = `<p>行业需求</p>
                      <p>行业:${params.name}</p>
                      <p>人数:${params.value}人</p>
                      <p>占比:${rate}%</p>`;

              return text;
            }
          },
          series: [
            {
              name: '全部行业',
              top: '20',
              bottom: '20%',
              type: 'treemap',
              leafDepth: 1,
              levels: [
                {
                  colorSaturation: [0.6, 0.3],
                  itemStyle: {
                    normal: {
                      color: '#55cdb7',

                    }
                  }
                }
              ],
              breadcrumb: {
                show: true,
                top: '81%',
                itemStyle: {
                  color: '#55cdb7',
                  borderColor: '#fff',
                  shadowColor: "#fff"
                }
              },
              data: mapDataArr
            }
          ]
        };

        this.tradeDemand.setOption(option);
      },
      mouseenter () {
        this.$refs.topFilter._hideChartTitle()
      },
      mouseleave () {
        this.$refs.topFilter._showChartTitle()
      },
    }

  }
</script>

<style scoped>

  /* css 引用 */
  @import '../../../assets/css/decision.css';
  /* 必须在decision 下*/
  @import '../../../assets/css/portrait-personk-detail.css';

  .height-percent-90 {
    height: 90%
  }
</style>
